<template>
  <div class="translate-file">
    <div class="select-upload">
      <div class="upload-wrap">
        <el-upload class="upload-com" ref="uploadRef" v-if="fileList.length === 0" accept=".pdf" :on-change="successUpload"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false">
          <div class="select-file flex-column flex-center">
            <div class="flex-row flex-center flex-align-center">
              <img class="file-icon" src="../../../assets/images/icon_pdf.png" />
            </div>
            <div class="upload-title">点击上传或拖拽文件（夹）到此区域 </div>
            <div class="upload-tip">
              <span>文件5M以内 ( PDF&lt;10M ) </span>
              <el-popover :width="400" title="支持语种" placement="right" trigger="hover"
                content="this is content, this is content, this is content">
                <template #reference>
                  <span>支持语种</span>
                </template>
              </el-popover>
            </div>
            <div style="margin-top: 26px;">
              <el-button type="primary" link>
                <el-icon>
                  <FolderOpened />
                </el-icon>
                <span style="margin-left: 10px;">选择文件夹</span>
              </el-button>
            </div>
          </div>
        </el-upload>
        <div v-else>
          <el-table :data="fileList">
            <el-table-column align="center" prop="name" label="文件名称"></el-table-column>
            <el-table-column align="center" label="原文语言">
              <template v-slot="{ row }">
                <el-select v-model="row.one" placeholder="原文语言">
                    <template #prefix>
                        <span style="color:#585656">语言:</span>
                    </template>
                    <el-option label="全部" value="" />
                    <el-option v-for="item of language" :key="item.name['en-US']" :label="item.name['zh-CN']"
                        :value="item.name['en-US']" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="目标语言">
              <template v-slot="{ row }">
                <el-select v-model="row.one1" placeholder="目标语言">
                    <template #prefix>
                        <span style="color:#585656">语言:</span>
                    </template>
                    <el-option label="全部" value="" />
                    <el-option v-for="item of language" :key="item.name['en-US']" :label="item.name['zh-CN']"
                        :value="item.name['en-US']" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="术语库">
              <template v-slot="{ row }">
                <el-select v-model="row.one2" placeholder="术语库">
                    <template #prefix>
                        <span style="color:#585656">术语库:</span>
                    </template>
                    <el-option label="术语库1" value="1" />
                    <el-option label="术语库2" value="2" />
                    <el-option label="术语库3" value="3" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="翻译记忆库">
              <template v-slot="{ row }">
                <el-select v-model="row.one3" placeholder="翻译记忆库">
                    <template #prefix>
                        <span style="color:#585656">记忆库:</span>
                    </template>
                    <el-option label="记忆库1" value="1" />
                    <el-option label="记忆库2" value="2" />
                    <el-option label="记忆库3" value="3" />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
    <div class="translate-record" v-if="type!=='convert'">

      <div class="translate-file-list">

        <el-tabs v-model="activeName">
          <el-tab-pane label="文件列表" name="first">
            <div style="padding:10px; border-bottom: 1px solid #e0e0e0;">
              <el-button size="small" disabled round>批量下载</el-button>
              <el-button size="small" disabled round>批量删除</el-button>
              <el-button size="small" disabled round>清空列表</el-button>
            </div>
            <div>
              <el-table :height="300">
                <el-table-column align="center" label="编号"></el-table-column>
                <el-table-column align="center" label="文件名称"></el-table-column>
                <el-table-column align="center" label="翻译方向"></el-table-column>
                <el-table-column align="center" label="选择资源库"></el-table-column>
                <el-table-column align="center" label="翻译状态"></el-table-column>
                <el-table-column align="center" label="操作"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="回收站" name="second">

            <div style="padding:20px">
              <div>
                <h3>回收站总览</h3>
                <el-row style="font-size: 12px;margin-top: 20px;color: #666;">
                  <el-col :span="4">文件总数（个）
                    <el-tooltip class="item" effect="light" content="临时删除的文件数量" placement="top-start">
                      <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                    : 0</el-col>
                  <el-col :span="4">未翻译文件（个）
                    <el-tooltip class="item" effect="light" content="未翻译文件被删除的数量" placement="top-start">
                      <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                    : 0</el-col>

                  <el-col :span="4">即将过期（个）
                    <el-tooltip class="item" effect="light" content="回收站中剩余7天有效期的文件数量" placement="top-start">
                      <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                    : 0</el-col>
                  <el-col :span="4">已恢复文件（个）
                    <el-tooltip class="item" effect="light" content="恢复已删除的文件数量" placement="top-start">
                      <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                    : 0</el-col>
                </el-row>

              </div>

              <el-divider />



              <div>
                <h3>文件列表 <small style="font-size: 12px;color:#666;font-weight: 100;"> 删除查询记录<i
                      class="el-icon-d-arrow-right"></i> </small></h3>


              </div>

              <div style="margin-top: 30px;">
                <el-button disabled size="small" round type="primary">一键恢复</el-button>
                <el-button disabled size="small" round>批量删除</el-button>
              </div>

              <el-divider />

              <el-table :height="300">
                <el-table-column align="center" label="编号"></el-table-column>
                <el-table-column align="center" label="文件名称"></el-table-column>
                <el-table-column align="center" label="翻译方向"></el-table-column>
                <el-table-column align="center" label="选择资源库"></el-table-column>
                <el-table-column align="center" label="翻译状态"></el-table-column>
                <el-table-column align="center" label="操作"></el-table-column>
              </el-table>


            </div>





          </el-tab-pane>

        </el-tabs>



      </div>



    </div>
  </div>
</template>
<script setup lang="ts">
import {
  FolderOpened,
} from '@element-plus/icons-vue'
import { listObject } from '@/utils/languagelist'
import { ref } from 'vue';


defineProps({
  type:String
})

// const uploadRef = ref<UploadInstance>()

// const submitUpload = () => {
//   uploadRef.value!.submit()
// }
const activeName = ref('first')
const fileList = ref<any>([])
const successUpload = (uploadFile: any, uploadFiles: any) => {
  console.log(uploadFile, uploadFiles)
  fileList.value = [uploadFile];
}
const language = listObject.languagelist.map((item => {
    return {
        ...item,
        name: JSON.parse(item.name)
    }
}))
const fieldlist = listObject.fieldlist.map((item => {
    return {
        ...item,
        name: JSON.parse(item.name)
    }
}))


</script>

<style lang="scss" scoped>
.translate-file {
  width: 100%;
  height: 100%;
  // background: #f9f9fd;
  overflow: auto;
}

.select-upload {
  margin-top: 20px;
  height: 332px;
  padding: 11px 20px 22px 20px;
  background-color: #fff;
}

.upload-wrap {
  width: 100%;
  height: 100%;
  border: 1px dashed #eaecef;
  border-radius: 8px;
  text-align: center;

  .upload-com,
  :deep(.el-upload.el-upload--text) {
    width: 100%;
    height: 100%;
  }
}

.select-file {}

.file-icon {
  width: 54px;
  height: 52px;
  margin: 0 12px;
}

.upload-title {
  margin-top: 20px;
  font-size: 16px;
  color: #000;
}

.upload-tip {
  font-size: 12px;
  line-height: 17px;
  color: #8c96a3;
  margin-top: 14px;
}

.translate-record {
  padding: 0 20px;
}

.translate-file-list {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 15px 0 0;
}

:deep .el-tabs__nav {
  transform: translateX(1.0625rem) !important;

}
</style>